<script setup>
import {inject, onMounted, ref} from "vue";
import {doDelete, doGet, doPost, doPut} from "../../util/request.js";
import {useRoute, useRouter} from "vue-router";
import {confirmMessage, showMessage} from "../../util/message.js";

const flushPage = inject('flushPage')
// 创建路由对象
const router = useRouter()
// 创建路由参数对象
const route = useRoute()
// 线索详情对象
const clueDetailInfo = ref({})
// 根据标识查询市场活动详情
const loadDetail = (id) => {
  doGet('/api/clue/detail/info/'+id,{}).then(res => {
    clueDetailInfo.value = res.data.data
  })
}

// 创建市场活动备注集合对象
const dataList = ref([])
// 创建市场活动备注分页对象
const pageInfo = ref({})

// 分页查询市场活动备注列表
const loadData = (current) => {
  doGet('/api/clue/remark/page',{
    current: current,
    clueId:route.params.id
  }).then(res => {
    dataList.value = res.data.data.list
    pageInfo.value.total = res.data.data.total
  })
}

// 提交备注表单验证规则
const formRules = {
  noteContent: [
    {required: true, message: '请输入活动备注', trigger: 'blur'},
    {min: 3, max: 255, message: '长度在 3 到 255 个字符', trigger: 'blur'}
  ],
  noteWay: [
    {required: true, message: '请选择跟踪方式', trigger: 'change'},
  ],
  description: [
      {required: true, message: '请输入活动描述', trigger: 'blur'},
      {min: 3, max: 255, message: '长度在 3 到 255 个字符', trigger: 'blur'}
  ]
}

const ruleFormRef = ref()
const submit = (formEl) => {
  if (!formEl) return
  formEl.validate(valid => {
    if (valid) {
      doPost('/api/clue/remark',{
        clueId:route.params.id,
        noteWay: clueDetailInfo.value.noteWay,
        noteContent:clueDetailInfo.value.noteContent
      }).then(res => {
        if (res.data.code === 200) {
          // 重置表单
          ruleFormRef.value.resetFields()
          // 重新加载数据
          loadData(1)
        }
      })
    }
  })
}

// 修改市场活动活动备注弹出层控制器
const remarkDialogVisible = ref(false)
// 市场活动备注对象
const clueRemark = ref({})

const toEdit = (id) => {
  //根据标识查询备注内容
  doGet('/api/clue/remark/info/'+id,{}).then(res => {
    if (res.data.code === 200) {
      clueRemark.value = res.data.data
      remarkDialogVisible.value = true
    }else {
      showMessage('查询市场活动备注失败，原因：'+res.data.msg,'error')
    }
  })
}
const remarkRuleFormRef = ref()
// 提交修改线索备注
const updateClueRemark = (formEl) => {
  if (!formEl) return
  formEl.validate(valid => {
    if (valid) {
      // 准备参数
      let params = {
        id:clueRemark.value.id,
        noteContent:clueRemark.value.noteContent,
        noteWay: clueRemark.value.noteWay
      }
      // 发送编辑请求
      doPut('/api/clue/remark',params)
          .then(resp => {
            if (resp.data.code === 200) {
              showMessage("修改备注成功", 'success')
              remarkDialogVisible.value = false
              loadData(1)
            } else {
              showMessage("修改备注失败，原因："+resp.data.msg,'error')
            }
          })
    }
  })
}

// 重置表单
const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}

// 删除市场活动备注
const toDel = (id) => {
  // 弹框确认
  confirmMessage('您确认要删除吗？')
      .then(() => {
        doDelete('/api/clue/remark/'+id,{}).then(resp => {
          if (resp.data.code === 200) {
            showMessage("删除备注成功", 'success')
            loadData(1)
          } else {
            showMessage("删除备注失败，原因："+resp.data.msg,'error')
          }
        })
      })
}

//跟踪方式集合对象
const noteWayList = ref([])

//创建线索备注跟踪方式集合对象
const loadNoteWayList = () => {
  doGet('/api/dic/value/list',{
    typeCode:"noteWay"
  }).then(res => {
    if (res.data.code === 200){
      noteWayList.value = res.data.data
    }else {
      showMessage('查询列表失败，原因：'+res.data.msg,'error')
    }
  })
}
//转换为客户
const transferToCustomer = () => {
  let clueId = route.params.id
  // 弹框确认
  confirmMessage('您确认要转换为客户吗？')
      .then(() => {
        doPost('/api/clue/toCustomer/'+clueId,{}).then(resp => {
          if (resp.data.code === 200){
            showMessage("转换为客户成功", 'success')
            window.location.href = '/dashboard/customer'
          }else {
            showMessage("转换为客户失败，原因："+resp.data.msg,'error')
          }
        })
      })
}

onMounted(()=>{
  // 获取路由参数活动标识
  let id = route.params.id
  // 查询市场活动详情
  loadDetail(id)
  // 分页查询市场活动备注列表
  loadData(1)
  // 查询线索备注跟踪方式集合
  loadNoteWayList()
})
</script>

<template>
  <h1>线索详情页面</h1>

  <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="clueDetailInfo"
      status-icon
      :rules="formRules"
      label-width="auto"
  >
    <el-form-item label="线索标识：" >
      {{clueDetailInfo.id}}
    </el-form-item>
    <el-form-item label="拥有者：" >
      {{clueDetailInfo.ownerName}}
    </el-form-item>
    <el-form-item label="活动名称：" >
      {{clueDetailInfo.activityName}}
    </el-form-item>
    <el-form-item label="姓名：" >
      {{clueDetailInfo.fullName}}
    </el-form-item>
    <el-form-item label="称呼：" >
      {{clueDetailInfo.appellationName}}
    </el-form-item>
    <el-form-item label="手机号：" >
      {{clueDetailInfo.phone}}
    </el-form-item>
    <el-form-item label="QQ号：" >
      {{clueDetailInfo.qq}}
    </el-form-item>
    <el-form-item label="微信：" >
      {{clueDetailInfo.weixin}}
    </el-form-item>
    <el-form-item label="邮箱：" >
      {{clueDetailInfo.email}}
    </el-form-item>
    <el-form-item label="年龄：" >
      {{clueDetailInfo.age}}
    </el-form-item>
    <el-form-item label="工作：" >
      {{clueDetailInfo.job}}
    </el-form-item>
    <el-form-item label="年收入：" >
      {{clueDetailInfo.yearIncome}}
    </el-form-item>
    <el-form-item label="地址：" >
      {{clueDetailInfo.address}}
    </el-form-item>
    <el-form-item label="是否贷款：" >
      {{clueDetailInfo.needLoanName}}
    </el-form-item>
    <el-form-item label="意向状态：" >
      {{clueDetailInfo.intentionStateName}}
    </el-form-item>
    <el-form-item label="意向产品：" >
      {{clueDetailInfo.intentionProductName}}
    </el-form-item>
    <el-form-item label="线索状态：" >
      {{clueDetailInfo.stateName}}
    </el-form-item>
    <el-form-item label="线索来源：" >
      {{clueDetailInfo.sourceName}}
    </el-form-item>
    <el-form-item label="创建时间：" >
      {{clueDetailInfo.createTime}}
    </el-form-item>
    <el-form-item label="创建人：" >
      {{clueDetailInfo.createByName}}
    </el-form-item>
    <el-form-item label="编辑时间：" >
      {{clueDetailInfo.editTime}}
    </el-form-item>
    <el-form-item label="编辑人：" >
      {{clueDetailInfo.editByName}}
    </el-form-item>
    <el-form-item label="跟踪内容：" prop="noteContent">
      <el-input v-model="clueDetailInfo.noteContent" type="textarea"
                maxlength="255" minlength="3" show-word-limit rows="6"/>
    </el-form-item>
    <el-form-item label="跟踪方式: " prop="noteWay">
      <el-select
          v-model="clueDetailInfo.noteWay"
          placeholder="请选择"
          style="width: 240px">
        <el-option
            v-for="noteWay in noteWayList"
            :key="noteWay.id"
            :label="noteWay.typeValue"
            :value="noteWay.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="下次联系时间" prop="nextContactTime">
      <el-date-picker
          v-model="clueDetailInfo.nextContactTime"
          type="datetime"
          value-format="YYYY-MM-DD HH:mm:ss"
          date-format="YYYY-MM-DD HH:mm:ss"
      />

    </el-form-item>
  </el-form>
  <el-button type="primary" @click="submit(ruleFormRef)">提交</el-button>
  <el-button @click="resetForm(ruleFormRef)">重置</el-button>
  <el-button @click="router.back()">返回</el-button>
  <el-button @click="transferToCustomer">转换为客户</el-button>
  <el-divider/>

  <h4>备注列表</h4>

  <el-table
      :data="dataList"
      row-key="id"
      style="width: 100%"
      @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" :selectable="selectable" width="55" />
    <el-table-column label="序号" type="index" width="80" />
    <el-table-column label="跟踪方式" width="200" property="noteWayName"/>
    <el-table-column label="跟踪内容" property="noteContent"  width="120" show-overflow-tooltip/>
    <el-table-column label="创建时间" width="200" property="createTime"/>
    <el-table-column label="创建人" property="createByName"  width="120"/>
    <el-table-column label="编辑时间" width="200" property="editTime"/>
    <el-table-column label="编辑人" width="200" property="editByName"/>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="success" size="small" @click="toEdit(scope.row.id)">编辑</el-button>
        <el-button size="small" type="danger" @click="toDel(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <div>&nbsp;</div>

  <el-pagination
      background layout="prev, pager, next"
      :total=pageInfo.total
      @change="loadData"/>

  <!-- 修改线索备注弹出层 -->
  <el-dialog
      v-model="remarkDialogVisible"
      title="修改线索备注"
      width="500"
      :close-on-click-modal=false
      :show-close=false
      align-center>

    <el-form
        style="max-width: 600px"
        status-icon
        :model="clueRemark"
        label-width="auto"
        :rules="formRules"
        ref="remarkRuleFormRef"
    >
      <el-input type="hidden" v-model="clueRemark.id"/>
      <el-form-item label="跟踪内容：" prop="noteContent">
        <el-input v-model="clueRemark.noteContent" type="textarea"
                  maxlength="255" minlength="3" show-word-limit rows="6"/>
      </el-form-item>
      <el-form-item label="跟踪方式: " prop="noteWay">
        <el-select
            v-model="clueRemark.noteWay"
            placeholder="请选择"
            style="width: 240px">
          <el-option
              v-for="noteWay in noteWayList"
              :key="noteWay.id"
              :label="noteWay.typeValue"
              :value="noteWay.id"
          />
        </el-select>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="remarkDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updateClueRemark(remarkRuleFormRef)">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>

</style>